<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap 的基本使用</title>
    <link href="lib/boostrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.js"></script>
    <!--引入css 文件-->
    <link rel="stylesheet" href="css/index.css" type="text/css"/>
    <style>
        .mb_imageBox{
            display: block;
            width: 100%;
        }
        .mb_imageBox>img{
            display: block;
            width: 100%;
        }


        /*pc 的样式*/
        .pc_image_box{
            width: 100%;
            height: 410px;
            display: block;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }


    </style>
</head>
<body>
    <!--
            basePath:http://127.0.0.1/wjs/
        以后页面上面我们可以添加这样的内容，给页面下面所有的超链接，或者图片，src，href
        都添加这样的一个路径 http://127.0.0.1/wjs/
    -->
    <!--顶部通栏-->
    <header class="wjs_topbar  hidden-xs hidden-sm">
            <div class="container">
                    <div class="row ">
                        <div class="col-lg-2 col-md-2">
                                <a href="#">
                                <span class="wjs_icon wjs_icon_phone"></span>
                                <span>手机微金所</span>
                                 <span class="glyphicon glyphicon-menu-down"></span>
                                <img src="images/code.jpg">
                                </a>
                        </div>
                        <div class="col-lg-5  col-md-5">
                                <span class="wjs_icon wjs_icon_tel"></span>
                                <span> 4006-89-4006（服务时间：9:00~21:00） 联系在线客服</span>
                        </div>
                        <div class="col-lg-2  col-md-2">
                                 <a href="#">常见问题</a>
                                 <a href="#" class="m_l10">财富登陆</a>
                        </div>
                        <div class="col-lg-3  col-md-3">
                            <!--
                                    btn 当前元素渲染成按钮
                            -->
                                <a class="btn btn-danger btn-register">免费注册</a>
                                <a class="btn btn-link btn-login">登陆</a>
                        </div>
                    </div>
            </div>
    </header>
    <!--导航-->
        <nav class=" wjs_nav navbar navbar-default">
            <div class="container">
                <div class="navbar-header">

                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                            <!--我使用的是微金所的字体图标-->
                          <span class="wjs_icon wjs_icon_logo"></span>
                          <span  class="wjs_icon wjs_icon_word"></span>
                    </a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">我要投资 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">我要借贷</a></li>
                        <li><a href="#">平台介绍</a></li>
                        <li><a href="#">新手专区</a></li>
                        <li><a href="#">最新动态</a></li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">个人中心</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    <!--轮播图-->
    <div class="wjs_banner">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators
                 对应的原点
             -->
            <ol class="carousel-indicators">
                <!--

                -->
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>
            <!--轮播项-->
            <div class="carousel-inner" role="listbox">

            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

    </div>
    <!--信息区域-->
    <div class="wjs_info hidden-xs">
             <div class="container">
                    <div class="row">
                            <div class="col-lg-4 col-md-4 col-sm-6">
                                <div class="media">
                                    <a href="#">
                                    <div class="media-left">
                                         <span class="wjs_icon wjs_icon_E903"></span>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">支付交易保障</h4>
                                        <p>
                                             支付宝xxx来保证你的安全，好吗
                                        </p>
                                    </div>
                                    </a>
                                </div>
                            </div>
                        <div class="col-lg-4 col-md-4 col-sm-6">
                            <div class="media">
                                <a href="#">
                                    <div class="media-left">
                                        <span class="wjs_icon wjs_icon_E903"></span>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">支付交易保障</h4>
                                        <p>
                                            支付宝xxx来保证你的安全，好吗
                                        </p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-6">
                            <div class="media">
                                <a href="#">
                                    <div class="media-left">
                                        <span class="wjs_icon wjs_icon_E903"></span>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">支付交易保障</h4>
                                        <p>
                                            支付宝xxx来保证你的安全，好吗
                                        </p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-6">
                            <div class="media">
                                <a href="#">
                                    <div class="media-left">
                                        <span class="wjs_icon wjs_icon_E903"></span>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">支付交易保障</h4>
                                        <p>
                                            支付宝xxx来保证你的安全，好吗
                                        </p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-6">
                            <div class="media">
                                <a href="#">
                                    <div class="media-left">
                                        <span class="wjs_icon wjs_icon_E903"></span>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">支付交易保障</h4>
                                        <p>
                                            支付宝xxx来保证你的安全，好吗
                                        </p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-6">
                            <div class="media">
                                <a href="#">
                                    <div class="media-left">
                                        <span class="wjs_icon wjs_icon_E903"></span>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">支付交易保障</h4>
                                        <p>
                                            支付宝xxx来保证你的安全，好吗
                                        </p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
             </div>

    </div>
    <!--预约-->
    <div class="wjs_books">
            <div class="container">
                    <div class="row">
                            <div class="pull-left">
                                 <span  class="wjs_icon wjs_icon_E906"></span>
                                 <span>现在有 273 人在排队，累计预约交易成功 7571 次。 什么是预约投标？ </span>
                                  <a href="#" class="book_link">立即预约</a>
                            </div>
                            <div class="pull-right">
                                    <a href="">
                                            <span class="wjs_icon wjs_icon_E905"></span>
                                            微金所企业宣传片
                                    </a>
                            </div>
                    </div>

            </div>
    </div>
    <!-- 产品区域 -->
    <div class="wjs_product">
            <!--选项卡卡-->
        <div class="container">
            <div class="nav-tabs-product-parent">
                <ul class="nav nav-tabs-product" role="tablist">
                    <!--
                            页面加载完毕，我获取到nav-tabs-product 所有的li，然后获取到所有的li之后获取到
                        li 的总共的宽度，然后设置到nav-tabs-product 上面去.

                    -->
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">特别推荐</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">微投资</a></li>
                    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">微投资</a></li>
                    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">微投资</a></li>
                    <li role="presentation"><a href="#myself1" aria-controls="messages" role="tab" data-toggle="tab">微投资</a></li>
                    <li role="presentation"><a href="#myself2" aria-controls="settings" role="tab" data-toggle="tab">微投资</a></li>
                </ul>
            </div>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <a href="#" class="product_box active">
                            <div class="product_right">
                                <p>
                                    <b>8</b>
                                    <!--
                                    html5 里面的语义标签，下标
                                    -->
                                    <sub>%</sub>
                                </p>
                                <p>
                                    年利率
                                </p>
                            </div>
                                <div class="product_left">
                                         <h3>新手体验标001期</h3>
                                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                <p>起投金额</p>
                                                <p>0.01万</p>
                                        </div>
                                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                               <p>已投标人</p>
                                               <p>22</p>
                                        </div>
                                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                              <p>借款期限</p>
                                              <p>10天</p>
                                        </div>
                                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                              <p>已投标总额</p>
                                              <p>1000万</p>
                                        </div>
                                </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <a href="#" class="product_box ">
                            <div class="product_right">
                                <div class="topbar">
                                        <!--
                                                调用bootstrap 给我们的工具提示插件.

                                        -->
                                        <span class="bao" data-toggle="tooltip" data-placement="top" title="微金宝">宝</span>
                                        <span class="bei" data-toggle="tooltip" data-placement="top" title="北京市">北</span>
                                </div>
                                <p>
                                    <b>8</b>
                                    <!--
                                    html5 里面的语义标签，下标
                                    -->
                                    <sub>%</sub>
                                </p>
                                <p>
                                    年利率
                                </p>
                            </div>
                            <div class="product_left">
                                <h3>新手体验标001期</h3>
                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                    <p>起投金额</p>
                                    <p>0.01万</p>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                    <p>已投标人</p>
                                    <p>22</p>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                    <p>借款期限</p>
                                    <p>10天</p>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                    <p>已投标总额</p>
                                    <p>1000万</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <a href="#" class="product_box ">
                            <div class="product_right">
                                <p>
                                    <b>8</b>
                                    <!--
                                    html5 里面的语义标签，下标
                                    -->
                                    <sub>%</sub>
                                </p>
                                <p>
                                    年利率
                                </p>
                            </div>
                            <div class="product_left">
                                <h3>新手体验标001期</h3>
                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                    <p>起投金额</p>
                                    <p>0.01万</p>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                    <p>已投标人</p>
                                    <p>22</p>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                    <p>借款期限</p>
                                    <p>10天</p>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                    <p>已投标总额</p>
                                    <p>1000万</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <a href="#" class="product_box ">
                            <div class="product_right">
                                <p>
                                    <b>8</b>
                                    <!--
                                    html5 里面的语义标签，下标
                                    -->
                                    <sub>%</sub>
                                </p>
                                <p>
                                    年利率
                                </p>
                            </div>
                            <div class="product_left">
                                <h3>新手体验标001期</h3>
                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                    <p>起投金额</p>
                                    <p>0.01万</p>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                    <p>已投标人</p>
                                    <p>22</p>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                    <p>借款期限</p>
                                    <p>10天</p>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                    <p>已投标总额</p>
                                    <p>1000万</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="profile">2</div>
                <div role="tabpanel" class="tab-pane" id="messages">3</div>
                <div role="tabpanel" class="tab-pane" id="settings">4</div>
                <div role="tabpanel" class="tab-pane" id="myself1">5</div>
                <div role="tabpanel" class="tab-pane" id="myself2">6</div>
            </div>
        </div>

    </div>
    <!--新闻区域-->
    <div class="wjs_news">
                <div class="container">
                        <div class="row">
                                <!--
                                     调整偏移量的.
                                     只设置大屏幕的，
                                -->
                                <div class="col-lg-2 col-md-2 col-lg-offset-2">
                                        <div class="news_title">
                                                全部新闻
                                        </div>
                                </div>
                                <div class="col-lg-1 col-md-1">
                                    <div class="news_line hidden-xs hidden-sm"></div>
                                    <ul class="nav nav-tabs-news" role="tablist">
                                        <li role="presentation" class="active"><a href="#home9527" aria-controls="home" role="tab" data-toggle="tab" class="wjs_icon wjs_icon_new01"></a></li>
                                        <li role="presentation"><a href="#profile9527" aria-controls="profile9527" role="tab" data-toggle="tab" class="wjs_icon wjs_icon_new02"></a></li>
                                        <li role="presentation"><a href="#messages9527" aria-controls="messages9527" role="tab" data-toggle="tab" class="wjs_icon wjs_icon_new03"></a></li>
                                        <li role="presentation"><a href="#settings9527" aria-controls="settings9527" role="tab" data-toggle="tab" class="wjs_icon wjs_icon_new04"></a></li>
                                    </ul>

                                </div>
                                <div class="col-lg-7 col-md-7">
                                    <div class="tab-content">
                                        <div role="tabpanel" class="tab-pane active" id="home9527">
                                            <ul>
                                                <li>
                                                    <a href="#">
                                                        <span class="hidden-xs">2016-01-22</span> 【微还款】一周还款公告2016年1月18日-1月24日
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <span class="hidden-xs">2016-01-22</span> 【微还款】一周还款公告2016年1月18日-1月24日
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <span class="hidden-xs">2016-01-22</span> 【微还款】一周还款公告2016年1月18日-1月24日
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <span class="hidden-xs">2016-01-22</span> 【微还款】一周还款公告2016年1月18日-1月24日
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <span class="hidden-xs">2016-01-22</span> 【微还款】一周还款公告2016年1月18日-1月24日
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <span class="hidden-xs">2016-01-22</span> 【微还款】一周还款公告2016年1月18日-1月24日
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <span class="hidden-xs">2016-01-22</span> 【微还款】一周还款公告2016年1月18日-1月24日
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <span class="hidden-xs">2016-01-22</span> 【微还款】一周还款公告2016年1月18日-1月24日
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div role="tabpanel" class="tab-pane" id="profile9527">2</div>
                                        <div role="tabpanel" class="tab-pane" id="messages9527">3</div>
                                        <div role="tabpanel" class="tab-pane" id="settings9527">4</div>
                                    </div>
                                </div>
                        </div>
                </div>
    </div>
    <!--合作伙伴-->
    <div class="wjs_partner">
            <div class="container">
                <div class="row">
                        <ul>
                            <li>
                                    <a href="#" class="wjs_icon wjs_icon_partner01"></a>
                            </li>
                            <li>
                                <a href="#" class="wjs_icon wjs_icon_partner02"></a>
                            </li>
                            <li>
                                <a href="#" class="wjs_icon wjs_icon_partner03"></a>
                            </li>
                            <li>
                                <a href="#" class="wjs_icon wjs_icon_partner04"></a>
                            </li>
                            <li>
                                <a href="#" class="wjs_icon wjs_icon_partner05"></a>
                            </li>
                            <li>
                                <a href="#" class="wjs_icon wjs_icon_partner06"></a>
                            </li>
                            <li>
                                <a href="#" class="wjs_icon wjs_icon_partner07"></a>
                            </li>
                            <li>
                                <a href="#" class="wjs_icon wjs_icon_partner08"></a>
                            </li>
                            <li>
                                <a href="#" class="wjs_icon wjs_icon_partner09"></a>
                            </li>
                        </ul>
                </div>
            </div>
    </div>
<!--定义模板-->
    <!--模板里面的内容怎么去写，取决于你要写到页面上面的内容
     <!--如果是移动端，就是这部分数据
      <%%> 逻辑
      <%=%> 输出.
     -->
 <!--
        {
         list:[
              {
                "pc":"images/slide_01_2000x410.jpg",
                "mb":"images/slide_01_640x340.jpg"
              },
              {
                "pc":"images/slide_02_2000x410.jpg",
                "mb":"images/slide_02_640x340.jpg"
              },
              {
                "pc":"images/slide_03_2000x410.jpg",
                "mb":"images/slide_03_640x340.jpg"
              },
              {
                "pc":"images/slide_04_2000x410.jpg",
                "mb":"images/slide_04_640x340.jpg"
              }
            ],
            isMobile:true
        }


 -->

     <!--如果是pc 端，就是这部分数据-->
<script type="text/template" id="templateId">

    <%for(var i=0;i<list.length;i++){%>
        <%if(i==0){%>
             <div class="item active">
        <%}else{%>
             <div class="item">
        <%}%>

        <%if(isMobile){%>
            <a href="#" class="mb_imageBox hidden-lg hidden-md hidden-sm">
                <img src="<%=list[i].mb_image%>">
            </a>
        <%}else{%>
             <a href="#" class="pc_image_box hidden-xs" style="background-image: url('<%=list[i].pc_image%>')"></a>
        <%}%>
        </div>
    <%}%>
</script>

<script src="lib/jQuery/jquery.min.js"></script>
<script src="lib/boostrap/js/bootstrap.js"></script>
<script src="js/template-native.js"></script>
<script src="js/index.js"></script>
</body>
</html>